<script lang="ts">
import {Vue, Component, Watch} from 'vue-property-decorator';
import {
  deleteMerchants,
  getMerchantCategoryInfo,
  selectAllMerchantCategory,
  updateMerchantStatus
} from "@/api/merchant";
import Edit from './components/Edit.vue'
@Component({
  name:"MerChant",
  components:{
    Edit
  }
})
export default class index extends Vue {

  private BusinessStatus:number = null
  private merchantName:string = ''
  public merchantCategory:any = []
  private categoryId:number = null
  private CategoryResponse = []
  private scene:number = 0
  public isAdd:boolean = false
  private updateMerchantInfo = {}
  private merchants:number[] = []
  public total:number = 0
  public pageSize:number = 3
  public pageSizes = [3,5,7,9]
  public currentPage:number = 1
  public selectedMerchant = []
  private loading = false
  created() {
    this.init()
  }

  @Watch('merchantName')
  onChangeValue(newVal:string, oldVal:string) {
    if(!newVal) {
      this.getMerchantCategoryInfo()
    }
  }

  init() {
    this.$nextTick(()=>{
      this.getAllMerchantCategory()
      this.getMerchantCategoryInfo()
    })
  }

  add() {
    this.isAdd = true
    this.scene = 1
  }

  update(row){
    console.log("row",row)
    this.updateMerchantInfo = Object.assign({}, row)
    this.isAdd = false
    this.scene = 1
  }

  // 删除钩中的多个商家
  async deleteMerchants(){
    if(!this.selectedMerchant.length) {
      this.$message.warning({
        type:'warning',
        message:'请勾选至少一个商家',
        offset:180,
      })
      return
    }
    if(this.selectedMerchant.every(item=>{
      return item.status === 0
      }
    )) {
      this.merchants = []
      this.selectedMerchant.forEach(item=>{
        this.merchants.push(item.id)
      })
      console.log("this mer", this.merchants)
      const {data} = await deleteMerchants(this.merchants)
      if(data.code===1) {
        this.$message.success({
          type:'success',
          message:'删除成功',
          offset:180
        })
        await this.getMerchantCategoryInfo()
      }else {
        this.$message.error({
          type:'error',
          message:'删除失败',
          offset:180
        })
      }
    }else {
      this.$message.error({
        type:'error',
        message:'有商家正在营业',
        offset:180
      })
      return
    }
  }

  // 删除一个商家
   async deleteMerchant(row){
    this.loading = true
    if(!row.status) {
      this.merchants = []
      this.merchants.push(row.id)
      console.log(this.merchants)
      const {data} = await deleteMerchants(this.merchants)
      if(data.code===1) {
        this.loading = false
        this.$message.success({
          type:'success',
          message:'删除成功',
          offset:180
        })
        await this.getMerchantCategoryInfo()
      }else {
        this.loading = false
        this.$message.error({
          type:'error',
          message:'删除失败',
          offset:180
        })
      }
    }else {
      this.loading = false
      this.$message.error({
        message:'营业中无法删除',
        type:'error',
        offset:180
      })
    }
  }


  back(status:number) {
    this.scene = status
    this.isAdd = !this.isAdd
  }

  // 获取分类信息
  async getAllMerchantCategory() {
    const {data} = await selectAllMerchantCategory()
    this.merchantCategory = data.data
    console.log(data)
  }

  // 获取分类后的查询结果
  async getMerchantCategoryInfo() {
    const {data} = await getMerchantCategoryInfo(this.currentPage, this.pageSize, this.categoryId, this.merchantName, this.BusinessStatus)
    this.total = data.data.total
    this.CategoryResponse = data.data.records
    console.log(data.data)
  }
  //
  // isUnique(arr) {
  //   return new Set(arr).size === arr.length
  // }

  handleSelectionChange(val){
    this.selectedMerchant = []
    val.forEach(item=>{
        this.selectedMerchant.push(item)
    })
    console.log(this.selectedMerchant)
  }

//   分页器相关
  handleSizeChange(newPageSize){
    this.pageSize = newPageSize
    this.getMerchantCategoryInfo()
  }

  handleCurrentChange(newCurrentPage){
    this.currentPage = newCurrentPage
    this.getMerchantCategoryInfo()
  }

  cancelDelete(){
    console.log("取消")
  }

  async updateStatus(row) {
    const {data} = await updateMerchantStatus(row)
    if(data.code===1) {
      this.$message.success({
        message:'营业状态修改成功'
      })
    }else {
      this.$message.error({
        message:'营业状态修改失败',
        type:'error'
      })
    }
  }
}
</script>

<template>
 <div>
   <el-card class="card_container">
       <div v-show="scene===0">
         <div class="form-container">
           <el-form label-width="right" :inline="true" class="form">
             <el-form-item label="名称:">
               <el-input v-model="merchantName" style="width: 200px" placeholder="请填写商家名称"/>
             </el-form-item>
             <el-form-item label="分类:">
               <el-select size="small" v-model="categoryId" placeholder="请选择商家分类">
                 <el-option label="无" :value="null"></el-option>
                 <el-option v-for="item in merchantCategory" :key="item.id" :label="item.name" :value="item.id"></el-option>
               </el-select>
             </el-form-item>
             <el-form-item label="状态:">
               <el-select size="small" v-model="BusinessStatus" placeholder="请选择营业状态">
                 <el-option label="无" :value="null"></el-option>
                 <el-option label="营业中" :value="1"></el-option>
                 <el-option label="打烊中" :value="0"></el-option>
               </el-select>
             </el-form-item>
             <el-form-item>
               <el-button @click="getMerchantCategoryInfo" type="primary" size="small">查询</el-button>
             </el-form-item>
             <el-form-item>
               <el-popconfirm
               title="确定要批量删除商家吗"
               icon="el-icon-nfo"
               icon-color="red"
               @onConfirm="deleteMerchants()"
               @onCancel="cancelDelete"
               >
                 <template v-slot:reference>
                   <el-button :loading="loading" :disabled="!selectedMerchant.length" type="danger" icon="el-icon-delete" size="small">批量删除</el-button>
                 </template>
               </el-popconfirm>
             </el-form-item>
             <el-form-item>
               <el-button @click="add()" type="info" icon="el-icon-plus" size="small">添加商家</el-button>
             </el-form-item>
           </el-form>
         </div>
         <el-table :border="true" :data="CategoryResponse" @selection-change="handleSelectionChange">
           <el-table-column fixed="left" width="70" type="selection"></el-table-column>
           <el-table-column width="200" prop="shopName" label="商家名称"></el-table-column>
           <el-table-column width="150" label="图片">
             <template v-slot="{row}">
               <img :src="row.image" width="100px" alt="图片加载失败">
             </template>
           </el-table-column>
           <el-table-column align="center" width="150" prop="shopCategoryName" label="商家分类"></el-table-column>
           <el-table-column align="center" width="200" prop="address" label="地址"></el-table-column>
<!--           <el-table-column align="center" width="150" label="营业状态">-->
<!--             <template v-slot="{row}">-->
<!--                 <span>{{row.status?'营业中':'打烊中'}}</span>-->
<!--                 <el-switch-->
<!--                   style="display: block"-->
<!--                   v-model="row.status"-->
<!--                   active-color="#13ce66"-->
<!--                   inactive-color="#ff4949"-->
<!--                   :inactive-value="0"-->
<!--                   :active-value="1"-->
<!--                   @change="updateStatus(row)"-->
<!--                 ></el-switch>-->
<!--             </template>-->
<!--           </el-table-column>-->
           <el-table-column width="300px" align="center" prop="updateTime" label="最后操作时间"></el-table-column>
           <el-table-column width="200px" fixed="right" label="操作">
             <template v-slot="{row}">
               <el-button style="margin-right: 20px" @click="update(row)" type="primary" size="small" icon="el-icon-edit" circle></el-button>
               <el-popconfirm
                :title="`确定删除商家 “${row.shopName}吗？”`"
                icon="el-icon-nfo"
                icon-color="red"
                @onConfirm="deleteMerchant(row)"
                @onCancel="cancelDelete">
                  <template v-slot:reference>
                    <el-button type="danger" size="small" icon="el-icon-delete" circle></el-button>
                  </template>
               </el-popconfirm>
             </template>
           </el-table-column>
         </el-table>
         <el-pagination layout="total, sizes, prev, pager, next, jumper"
                        background
                        hide-on-single-page
                        :current-page="currentPage"
                        :page-sizes="pageSizes"
                        :page-size="pageSize"
                        class="merchantList"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :total="total"
         ></el-pagination>
       </div>
       <Edit class="edit" :update-merchant-info="updateMerchantInfo" :is-add="isAdd" :merchant-category="merchantCategory" v-if="scene===1" @back="back"/>
   </el-card>
 </div>
</template>

<style scoped lang="scss">
.card_container {
  margin-top: 20px;
  margin-left: 30px;
  margin-right: 30px;
  .edit {
    margin: auto 0px;
  }
  .form-container {
    height: 100px;
    width: 100%;
    .form {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-around;
      margin-top: 20px;
    }
    .el-form-item {
      flex-grow: 1;
      margin-left: 20px;
    }
  }
}
.el-switch {
  height: 25px;
}
.status {
  display: inline-block;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  margin-right: 5px;
}
.merchantList {
  margin-top: 30px;
  text-align: center;
}
</style>
